<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘贴的</title>
<style>
    * {
        box-sizing: border-box;
    }
    .row:after {
        content: "";
        clear: both;
        display: block;
    }
    [class*="col-"] {
        float: left;
        padding: 15px;
    }
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    html {
        font-family: "Lucida Sans", sans-serif;
    }
    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        padding: 8px;
        margin-bottom: 7px;
        background-color :#33b5e5;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .menu li:hover {
        background-color: #0099cc;
    }
</style>
</head>
<body>

    <div class="header">
        <h1>查尼亚</h1>
    </div>
    
    <div class="row">
    
        <div class="col-3 menu">
        <ul>
            <li>航班</li>
            <li>城市</li>
            <li>岛屿</li>
            <li>食物</li>
        </ul>
        </div>
        
        <div class="col-9">
            <h1>The City</h1>
            <p>查尼亚是克里特岛查尼亚地区的首府. 这个城市可以分为两部分，老城区和现代城区.</p>
            <p>调整浏览器窗口的大小，以查看内容如何响应调整大小.</p>
        </div>
    
        </div>